<template>
  <div class="father">
    <h3>父组件</h3>
    <h4>{{ username }}</h4>
    <h4>{{ password }}</h4>
    <!-- v-model用在html标签上 -->
    <!-- input type="text" v-model="username"> -->
    <!-- 底层相当于这样实现 -->
    <!--<input type="text" :value="username" @input="username = (<HTMLInputElement>$event.target).value">-->

    <!-- v-model用在组件标签上 -->
    <!-- 这里直接用v-model,不生效,除非在组件上添加modelValue属性和update:modelValue事件-->
    <!-- <AtguiguInput v-model="username" /> -->
    <!-- 在组件标签上实现双向绑定的底层实现, 注意, update:modelValue是事件名 -->
    <!-- $event到底是什么?什么时候能用 .target?
    对于原生事件,$event就是事件对象,此时可以用 .target;
    对于自定义事件,$event就是触发事件时,所传递的数据, 此时不能用 .target;
    -->
    <!-- <AtguiguInput :modelValue="username" @update:modelValue="username = $event" /> -->

    <!-- 修改modelValue -->
    <<AtguiguInput v-model:ming="username" v-model:mima="password" @update:ming="username = $event"
      @update:mima="password = $event" />
  </div>
</template>
<script setup lang="ts" name="Father">
import { ref } from 'vue'
import AtguiguInput from './AtguiguInput.vue'

let username = ref('zhangsan')
let password = ref('123456')
</script>

<style scoped>
.father {
  padding: 20px;
  background-color: rgb(165, 164, 164);
  border-radius: 10px;
}
</style>
